.modal {  
  display: none;
  position: fixed; /* 让弹窗固定在屏幕上方 */  
  z-index: 1; /* 将弹窗置于最上层 */  
  left: 0;  
  top: 0;  
  width: 100%; /* 让弹窗占满整个屏幕 */  
  height: 100%; /* 让弹窗占满整个屏幕 */  
  overflow: auto; /* 防止弹窗溢出屏幕 */  
  background-color: rgba(0,0,0,0.4); /* 设置弹窗背景为半透明黑色 */  
  transition: all .5s;
  opacity: 0;
}  
  
.modal-content {  
  width: 400px;
  border-radius: 6px;
  overflow: hidden;
  text-align: center;
  background-color: #fefefe; /* 设置弹窗内部背景为白色 */  
  margin: 15% auto; /* 让弹窗在屏幕中央显示 */  
  padding: 20px; /* 设置弹窗内边距 */  
  border: 1px solid #888; /* 设置弹窗边框 */  
}  
  
/* 关闭按钮的样式设置 */  
.close {  
  color: #aaaaaa; /* 设置关闭按钮文字颜色为灰色 */  
  float: right; /* 将关闭按钮放在右侧 */  
  font-size: 28px; /* 设置关闭按钮字体大小 */  
  margin-top: -14px; /* 设置关闭按钮垂直居中 */  
  cursor: pointer; /* 鼠标悬停时显示手型指针 */  
}

.modal-body {
  width: 100%;
  height: auto;
  min-height: 50px;
  max-height: 500px;
  overflow-y: auto;
}

.button {
  margin-top: 20px;
  background-color: #409eff;
  padding: 10px 20px;
  color: #fff;
  border: none;
  border-radius: 30px;
  cursor: pointer;
  user-select: none;
}
.button:hover {
  background-color: #3c95ef;
}
.button:active {
  background-color: #2780d8;
}